<template>
  <div class="table">
    <div class="t-top">
      <!--使用el-input 要注意，他默认占父级100%的宽度-->
      <el-input v-model="query" placeholder="请输入内容"></el-input>
      <!--el-button 绑定点击事件向后台发送数据查询-->
      <!--在此处通常会涉及到模糊查询，此时我们还需要绑定keyup事件，向后台请求数据，然后渲染一个小的下拉框，我们需要做的是发送查询的字段给后台，
			后台使用sql语句模糊查询，我们渲染就可以-->
      <el-button type="primary" @click="search">查询</el-button>
    </div>
    <div class="t-bottom">
      <!-- el-table:表格组件 -->
      <!-- :data='tableData' 表格显示的数据 -->
      <!-- el-table-column：表格的一列 -->
      <!-- prop： 当前列要显示的数据 ，tableData内的数据-->
      <!-- label：表头 -->
      <!-- width: 这一列的宽度 -->
      <!--min-width：用来设置百分比-->
      <!--:header-cell-style="{background:'red'}"-->
      <!--align="center"表格内的数据居中-->

      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: 'red' }"
      >
        <el-table-column prop="date" label="日期" align="center" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="180">
        </el-table-column>
        <!--如果不设置百分比，就自动分配剩余的宽度-->
        <el-table-column prop="address" align="center" label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //	      绑定的input 查询关键字
      query: "",
      //	      需要一个数组用来存放table的数据
      //	      这是element组件里面的,
      tableData: []
    };
  },
  mounted() {
    //	  	在vue的生命周期的mounted中调用渲染列表
    this.initTable();
  },
  methods: {
    initTable() {
      //          渲染数据
      this.axios("https://www.easy-mock.com/mock/5c99c4f3853ba14a67c6daaa/vue/gettable").then(res => {
        console.log(res.data.tableData); //查看接口返回时什么样的数据，要常用
        this.tableData = res.data.data.tableData; //接口返回的是一个数组，直接可以赋值给table
      });
    },
    search() {
      //测试用于绑定的查询按钮，给了一个点击事件
      // 新增数据
      //	  		this.axios.post('api/table',{
      //	  			date: "2018-12-16",
      //	  			name: "why",
      //	  			address: "虹桥机场"
      //	  		}).then( res => {
      //	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
      //	  			this.initTable() //重新渲染
      //	  		})

      //         删除数据
      //	  		this.axios.delete('api/table/7').then( res => {
      //	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
      //	  			this.initTable() //重新渲染
      //	  		})

      //	  		this.axios.put('api/table/6',{
      ////	  			name:'hah'//如果只写一条会全部修改
      //              date: 2019,
      //              name: 'hh',
      //              address:'shanghai'
      //	  		}).then( res => {
      //	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
      //	  			this.initTable() //重新渲染
      //	  		})

      //        分页/条件查询
      //    this.axios('api/table?_start=1&_end=5').then( res => {
      //	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
      //	  			this.tableData = res.data //接口返回的是一个数组，直接可以赋值给table
      //
      //	  		})
      //
      //    this.axios('api/table?_start=1&_limit=3').then( res => {
      //	  			console.log(res.data)//查看接口返回时什么样的数据，要常用
      //	  			this.tableData = res.data //接口返回的是一个数组，直接可以赋值给table
      //
      //	  		})

      //       降序升序
      this.axios("api/table?_sort=1&_order=desc").then(res => {
        console.log(res.data); //查看接口返回时什么样的数据，要常用
        this.tableData = res.data; //接口返回的是一个数组，直接可以赋值给table
      });
    }
  }
};
</script>
<!--使用scoped需要注意，使用的它之后，你就无法更改elelment组件中的样式-->
<style lang="less" scoped="scoped">
/*如果不想使用scoped,你就用父级的class把样式全部包裹起来，就不会相互影响页面的样式了*/
.table {
  width: 100%;
  height: 100%;
  .t-top {
    width: 30%;
    height: 40px;
    .el-input {
      width: 60%;
    }
  }
  .t-bottom {
    margin-top: 20px;
  }
}
</style>
